<template>
  <view class="index_container">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <view style="background: rgba(255, 255, 255, 1)" class="search_box">
      <u-search
        :showAction="false"
        shape="square"
        placeholder="搜索門店"
        v-model="keyword"
      ></u-search>
    </view>

    <view class="page-body" v-show="!isCollapse">
      <view class="page-section page-section-gap">
        <map
          style="width: 100%; height: 415.116rpx"
          :latitude="latitude"
          :longitude="longitude"
          :markers="covers"
        >
        </map>
      </view>
    </view>

    <!-- 收齊地圖 -->
    <view class="page-section-title" @click="isCollapse = !isCollapse">
      <text>{{ !isCollapse ? "收起地圖" : "展開地圖" }}</text>
      <img
        class="shouqiImg"
        v-if="!isCollapse"
        :src="'./static/demo/arrow_top.png'"
        alt=""
      />
      <img
        v-else
        class="zhankaiImage"
        :src="'./static/demo/arrow_down.png'"
        alt=""
      />
    </view>

    <!-- 地圖列表 -->
    <view class="map_list">
      <view
        :class="selectedMarker === 0 ? 'map_item_active' : 'map_item'"
        @click="selectedMarker = 0"
      >
        <!-- 右上角標識 -->
        <view class="store_selected"  v-if="selectedMarker === 0">
          <img
            class="store_border"
            :src="'./static/demo/store_border.png'"
            alt=""
            srcset=""
          />
          <img class="duiPng" :src="'./static/demo/dui.png'" alt="" />
        </view>
        <view class="store_title">門店名稱</view>

        <view class="desc"
          >地址：台灣省高雄市XX大道8號XXXX一號二期北門一樓S8-108號商鋪</view
        >

        <view class="desc">電話：09XX-XXX-XXX</view>

        <view class="desc">營業時間：周一至周日 24小時營業</view>

        <view class="desc"
          >特殊營業：2024-08-08部分時間營業（09：00~18：00）</view
        >
      </view>

      <view
        :class="selectedMarker === 1 ? 'map_item_active' : 'map_item'"
        @click="selectedMarker = 1"
      >
        <view class="store_selected" v-if="selectedMarker === 1">
          <img
            class="store_border"
            :src="'./static/demo/store_border.png'"
            alt=""
            srcset=""
          />
          <img class="duiPng" :src="'./static/demo/dui.png'" alt="" />
        </view>
        <view class="store_title">門店名稱</view>

        <view class="desc"
          >地址：台灣省高雄市XX大道8號XXXX一號二期北門一樓S8-108號商鋪</view
        >

        <view class="desc">電話：09XX-XXX-XXX</view>

        <view class="desc">營業時間：周一至周日 24小時營業</view>

        <view class="desc"
          >特殊營業：2024-08-08部分時間營業（09：00~18：00）</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import base from "@/config/baseUrl";
import fNavbar from "@/components/module/f-navbar/f-navbar";
import fTabbar from "@/components/module/f-tabbar/f-tabbar";

export default {
  components: {
    fNavbar,
    fTabbar,
  },
  computed: {
    ...mapState(["PrimaryColor", "userInfo"]),
    freeSpecsButtonBackground() {
      return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
    },
  },
  data() {
    return {
      baseUrl: base.baseUrl,
      systemInfo: base.systemInfo,

      // 地圖是否收齊了
      isCollapse: false,

      // 當前選中了的標識
      selectedMarker: 0,

      keyword: "",
      id: 0, // 使用 marker点击事件 需要填写id
      title: "map",
      latitude: 22.519073,
      longitude: 113.963029,
      covers: [
        {
          latitude: 22.519073,
          longitude: 113.963029,
          iconPath: "../../../static/location.png",
        },
      ],
    };
  },
  onLoad() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
  },
  methods: {
    ...mapMutations(["setLoginPopupShow"]),
  },
  onPageScroll(e) {},
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: rgba(243, 243, 243, 1);
}

.index_container {
}

.search_box {
  padding: 13rpx 26rpx 13rpx 26rpx;
}
.page-section-title {
  width: 750rpx;
  height: 85.465rpx;
  background: rgba(255, 255, 255, 1);

  font-family: "I.Ming";
  font-size: 27.907rpx;
  font-weight: 400;
  display: flex;
  justify-content: center;

  align-items: center;
  color: rgba(79, 79, 79, 1);

  .shouqiImg {
    width: 20.93rpx;
    height: 10.93rpx;
    margin-left: 12rpx;
  }

  .shouqiImg {
    // width: 50px;
    // height: 50px;
    margin-left: 12rpx;
  }
}

.map_list {
  padding: 26.163rpx;

  .map_item_active {
    margin-bottom: 12rpx;

    width: 695.93rpx;
    height: 293.023rpx;
    border-radius: 5px 0px 0px 0px;
    background: rgba(255, 255, 255, 1);

    border: 0.3px solid rgba(247, 154, 77, 1);
    padding: 13.953rpx;

    position: relative;

    .store_selected {
      position: absolute;
      right: 0;
      top: 0;

      .store_border {
        width: 75rpx;
        height: 47.093rpx;
      }

      .duiPng {
        width: 31.395rpx;
        height: 19.186rpx;

        // 居中
        position: absolute;
        top: 15rpx;
        right: 50%;
        transform: translateX(50%);
      }
    }
  }

  .map_item {
    margin-bottom: 12rpx;

    width: 695.93rpx;
    height: 293.023rpx;
    border-radius: 5px 0px 0px 0px;
    background: rgba(255, 255, 255, 1);

    border: 0.3px solid rgba(255, 255, 255, 1);
    padding: 13.953rpx;
  }

  .store_title {
    font-family: "Microsoft PhagsPa";
    font-size: 34.884rpx;
    font-weight: 400;
    text-align: left;
    color: rgba(0, 0, 0, 1);
    margin-top: 17.442rpx;
    margin-bottom: 17.442rpx;
  }

  .desc {
    font-family: "DengXian";
    font-size: 24.419rpx;
    font-weight: 400;

    text-align: left;
    color: rgba(0, 0, 0, 1);

    margin-top: 12rpx;
  }
}
</style>
